<template>
	<view>
		<div class="navbar">
			<view class="tfc-list" v-if="navbarList.length<6">
				<view 
					class="tfc-item"
					:style="{width: 100/navbarList.length+'%',height,lineHeight:height,padding: height?'0':'30rpx 0'}"
					:class="{active: curBar.alias === item.alias}"
					v-for="(item, index) in navbarList"
					:key="index"
					@click="handleChooseNavbar(item,index)"
				>{{item.name}}</view>
			</view>
		</div>
		
		<view  class="navbar_long" :style="{height}" v-if="navbarList.length>=6">
			<scroll-view 
				scroll-x
				class="list_long"
				:scroll-left="curScrollWidth || '10px'"
				:style="{width:'100%',height}"
				@scroll="handleLongNavbarScroll"
			>
				<view 
					class="item_long"
					:style="{height,lineHeight:height,padding: height?'0 30rpx':'30rpx'}"
					:class="{active: curBar.alias === item.alias}"
					v-for="(item, index) in navbarList"
					:key="index"
					@click="handleChooseNavbar(item,index)"
				>{{item.name}}</view>
			</scroll-view>
		</view>
		
		
		<view class="swiper-wrap" :style="{height: swiperHeight}">
			<swiper class="swiper" :current="curSwiperIndex" @change="handleSwiper">
				<swiper-item 
					class="swiper-item"
					v-for="(it_date, in_date) in dateList"
					:key="in_date"
				>
					<scroll-view 
						scroll-y="true" 
						class="content-wrap"
						refresher-enabled
						enable-back-to-top
						:refresher-triggered="refresherTriggered"
						@scrolltolower="handleScrolltolower"
						@refresherrefresh="handleRefresherrefresh"
					>
						<view class="content" v-if="it_date.length">
							<view
								class="text"
								v-for="(item, index) in it_date"
								:key="index"
							>
								<CouponList :dateInfo="item" :current="curSwiperIndex" ></CouponList>
							</view>
						</view>
						<view class="nodata" v-else>这里还木有数据哈~~</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	import CouponList from './coupon-list.vue'
	export default {
		components: {
			CouponList
		},
		props: {
			navbarList: {
				type: Array,
				default() {
					return []
				}
			},
			curNavbar: {
				type: [Object,Boolean],
				default() {
					return false
				}
			},
			height: {
				type: [String,Boolean],
				default() {
					return false
				}
			},
			swiperHeight: {
				type: String,
				default() {
					return 'calc(100vh - 88rpx)'
				}
			},
			dateList: {
				type: [Array],
				default() {
					return []
				}
			}
		},
		data() {
			return {
				curSwiperIndex: 0,
				curBar: this.curNavbar,
				refresherTriggered: true, // 设置当前下拉刷新状态
				maxScrollWidth: 0,
			}
		},
		computed: {
			curScrollWidth() {
				let num = 80*(this.curSwiperIndex-2)
				if (num >= this.maxScrollWidth) {
					num = this.maxScrollWidth
				}
				return num
			}
		},
		methods: {
			handleChooseNavbar(item, i) {
				this.curBar = item
				this.curSwiperIndex = i
			},
			handleSwiper(e) {
				let i = e.detail.current
				this.curBar = this.navbarList[i]
				this.curSwiperIndex = i
				this.$emit('handleChooseNavbar', this.curBar, i)
			},
			handleScrolltolower() { // 滚动到底部
				this.$emit('handleScrolltolower', this.curBar, this.curSwiperIndex)
			},
			handleRefresherrefresh() { // 下拉刷新
				this.refresherTriggered = true
				this.$emit('handleRefresherrefresh', this.curBar, this.curSwiperIndex)
			},
			stopPullDownRefresh() {
				this.refresherTriggered = false
			},
			handleLongNavbarScroll(e) {
				this.maxScrollWidth = e.detail.scrollWidth*2-750
			},
		}
	}
</script>

<style lang="scss" scoped>
.navbar {
	.tfc-list {
		display: flex;
		justify-content: space-evenly;
		z-index: 2;
		background-color: #fff;
		.tfc-item {
			font-size: 32rpx;
			font-weight: 500;
			transition: all 0.1s ease-in;
			text-align: center;
			&.active {
				color: $blue;
				position: relative;
				font-size: bold;
				&::before {
					content: '';
					height: 6rpx;
					width: 36rpx;
					border-radius: 3rpx;
					background-color: $blue;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
}

.navbar_long {
	background-color: #fff;
	.list_long {
		white-space:nowrap;
		overflow:hidden;
		.item_long {
			font-size: 32rpx;
			font-weight: bold;
			transition: all 0.1s ease-in;
			display:inline-block;
			&.active {
				color: $blue;
				position: relative;
				&::before {
					content: '';
					height: 6rpx;
					width: 36rpx;
					border-radius: 3rpx;
					background-color: $blue;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
}

.swiper-wrap {
	.swiper {
		.swiper-item {
			.content-wrap {
				height: 100%;
				box-sizing: border-box;
				.content {
					padding: 20rpx 30rpx;
				}
			}
		}
	}
}

.nodata {
	text-align: center;
	color: #999;
	margin: 100rpx auto;
}
</style>
